<template>
  <div class="flex flex-column height bj">
    <header-top
      :TxtHeader="TxtHeader"
      @leftClick="back"
      @rightClick="rightClick"
    ></header-top>
    <div class="content_main">
      <div class="min">
        <div class="min_top">
          <div class="min_image">
            <img src="../../assets/Avatar.png" />
          </div>
          <div class="min_content">
            <div
              class="min_content_top flex justify-content-between align-items"
            >
              <div class="name">
                <h3>李雷</h3>
                <span>本人</span>
              </div>
              <button>
                基本信息<img src="../../assets/edit.png" alt="" />
              </button>
            </div>
            <div class="min_content_bottom">
              <div class="flex  justify-content-between text">
                <span>资料完整度</span>
                <span>50%</span>
              </div>
              <div>
                <van-progress color="#05cbbd" :percentage="50" />
              </div>
            </div>
          </div>
        </div>
        <div class="tabs">
          <ul class="flex">
            <li
              :class="index == navIndex ? 'active' : ''"
              @click="tabsFn(index)"
              v-for="(item, index) in navData"
              :key="index"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="cont_box">
          <div class="cont_list">
            <h3>体征数据 7/10</h3>
            <div class="list_content">
              <div class="content_top">
                <div class="content_title">基础数据</div>
                <div class="content_icon">
                  <img src="../../assets/icon_add.png" />
                </div>
              </div>
              <div class="content_buttom">
                <ul>
                  <li>
                    <div><span>172</span>cm</div>
                    <div class="cont">身高</div>
                  </li>
                  <li>
                    <div><span>80</span>kg</div>
                    <div class="cont">体重</div>
                  </li>
                  <li>
                    <div><span>80</span>cm</div>
                    <div class="cont">胸围</div>
                  </li>
                  <li>
                    <div><span>67</span>cm</div>
                    <div class="cont">腰围</div>
                  </li>
                </ul>
              </div>
            </div>

            <div class="list_content1">
              <div class="content_top">
                <div class="content_title">
                  <img src="../../assets/icon_01.png" />血糖血压信息
                </div>
                <div class="content_icon">
                  <img src="../../assets/icon_add_01.png" />
                </div>
              </div>
              <div class="content_buttom">
                <ul>
                  <li>
                    <div><span>5.0</span>mmol/L</div>
                    <div class="cont">空腹</div>
                  </li>
                  <li>
                    <div><span>6.0</span>mmol/L</div>
                    <div class="cont">体重</div>
                  </li>
                  <li>
                    <div><span>120</span>mmHg</div>
                    <div class="cont">腰围</div>
                  </li>
                </ul>
              </div>
            </div>

            <div class="list_content2">
              <div class="content_top">
                <div class="content_title">
                  <img src="../../assets/icon_02.png" />其它信息
                </div>
                <div class="content_icon">
                  <img src="../../assets/icon_add_02.png" />
                </div>
              </div>
              <div class="content_buttom">
                <ul>
                  <li>
                    <div><span>5.0</span>次/分</div>
                    <div class="cont">心率</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="cont_information">
            <div class="im_top">
              <div class="im_title">健康史 1/7</div>
              <div class="im_content">
                查看全部<img src="../../assets/icon_direction.png" />
              </div>
            </div>
            <div class="im_body">
              <div class="im_tit">过敏史</div>
              <div class="im_cont">飞絮，猫毛，狗毛</div>
            </div>
            <div class="im_body">
              <div class="im_tit">用药史</div>
              <div class="im_cont">未填写</div>
            </div>
            <div class="im_body">
              <div class="im_tit">吸烟史</div>
              <div class="im_cont">未填写</div>
            </div>
          </div>
          <div class="cont_information">
            <div class="im_top">
              <div class="im_title">电子病历</div>
              <div class="im_content">
                查看全部<img src="../../assets/icon_direction.png" />
              </div>
            </div>
            <div class="im_body">
              <div class="im_tit">李雷<span>28岁</span></div>
              <div class="im_cont">
                2020-10-30<img src="../../assets/icon_direction.png" />
              </div>
            </div>
            <div class="im_body">
              <div class="im_tit">李雷<span>28岁</span></div>
              <div class="im_cont">
                2020-10-30<img src="../../assets/icon_direction.png" />
              </div>
            </div>
            <div class="im_body">
              <div class="im_tit">李雷<span>28岁</span></div>
              <div class="im_cont">
                2020-10-30<img src="../../assets/icon_direction.png" />
              </div>
            </div>
          </div>
          <div class="cont_information">
            <div class="im_top">
              <div class="im_title">健康报告</div>
            </div>
            <div class="im_body">
              <div class="im_tit">测评报告</div>
              <div class="im_cont1">
                1份 <img src="../../assets/icon_direction.png" />
              </div>
            </div>
            <div class="im_body">
              <div class="im_tit">体检报告</div>
              <div class="im_cont">
                0份 <img src="../../assets/icon_direction.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";

export default {
  name: "Index",
  components: {
    HeaderTop
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        color: "#fff", //头部中间文字颜色
        title: "健康档案",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#fff"
        },
        rightOpt: {
          //右边按钮设置
          icon: "",
          text: "我的就诊人",
          color: "#fff"
        }
      },
      navIndex: 0,
      navData: ["体征数据", "健康史", "电子病历", "健康报告"],
      data: [1, 2, 3, 4],
      itemNum: ""
    };
  },
  created() {
    this.itemNum = this.data[this.navIndex];
  },
  methods: {
    tabsFn(i) {
      this.navIndex = i;
      this.itemNum = this.data[i];
    },
    back() {
      console.log(1);
    },
    rightClick() {
      console.log(2);
    }
  }
};
</script>
<style scoped>
.min_content_bottom >>> .van-progress__portion span {
  display: none;
}
</style>
<style lang="less" scoped>
.content_main {
  height: calc(100% - 0.5rem);
  overflow-y: auto;
  .min {
    width: 3.5rem;
    padding: 0.26rem 0.1rem;
    border-radius: 0.12rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(217, 217, 217, 0.5);
    margin: 0 auto;
    .min_top {
      display: flex;
      align-items: center;
      margin-bottom: 0.28rem;
      .min_image {
        width: 0.6rem;
        min-width: 0.6rem;
        height: 0.6rem;
        margin-left: 0.21rem;
        margin-right: 0.15rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          vertical-align: top;
          width: 100%;
        }
      }
      .min_content {
        padding-right: 0.22rem;
        flex: auto;
        .min_content_top {
          margin-bottom: 0.06rem;
          .name {
            display: flex;
            align-items: center;
            h3 {
              font-size: 0.18rem;
              margin-right: 0.03rem;
            }
            span {
              display: block;
              width: 0.31rem;
              height: 0.16rem;
              line-height: 0.16rem;
              font-size: 0.1rem;
              text-align: center;
              color: #fff;
              background: #ffcf35;
              border-radius: 0.16rem;
            }
          }
          button {
            font-size: 0.1rem;
            width: 0.64rem;
            height: 0.16rem;
            border: 0;
            color: #fff;
            margin-right: 0.03rem;
            padding: 0;
            background: #c4c4c4;
            border-radius: 0.16rem;
            img {
              vertical-align: middle;
              width: 0.1rem;
            }
          }
        }
        .min_content_bottom {
          .text {
            margin-bottom: 0.04rem;
          }
        }
      }
    }
    .tabs {
      width: 3.2rem;
      height: 0.28rem;
      border-radius: 0.28rem;
      background: linear-gradient(to left, #f1f1f1 0%, #dfdfdf 100%);
      margin-bottom: 0.38rem;
      ul {
        height: 100%;
        li {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          padding: 0 0.1rem;
          height: 100%;
          border-radius: 0.28rem;
        }
        li.active {
          background: linear-gradient(to left, #02c0cb 0%, #0adda4 100%);
          color: #fff;
        }
      }
    }
    .cont_box {
      .cont_list {
        margin-bottom: 0.5rem;
        h3 {
          font-size: 0.14rem;
          padding-left: 0.14rem;
          margin-bottom: 0.16rem;
        }
        .list_content {
          background: url("../../assets/icon_04.png") no-repeat;
          background-size: cover;
          margin-bottom: 0.14rem;
          img {
            vertical-align: middle;
            width: 0.13rem;
            padding-right: 0.04rem;
            height: 0.16rem;
          }
          .content_image {
            position: absolute;
            left: 0.4rem;
            img {
              width: 0.13rem;
              height: 0.16rem;
            }
          }
          .content_top {
            padding-top: 0.1rem;
            display: flex;
            margin-bottom: 0.19rem;
            justify-content: space-between;
            .content_title {
              padding-left: 0.36rem;
              font-size: 0.14rem;
              color: #02c0cb;
              display: block;
            }
            .content_icon {
              padding-right: 0.1rem;
              text-align: right;
              img {
                width: 0.21rem;
                height: 0.21rem;
              }
            }
          }
          .content_buttom {
            padding-left: 0.26rem;
            ul {
              display: flex;
              justify-content: space-between;
              li {
                padding: 0 0.3rem 0.1rem 0.1rem;
                span {
                  font-size: 0.16rem;
                }
                .cont {
                  font-size: 0.14rem;
                }
              }
            }
          }
        }
        .list_content1 {
          background: url("../../assets/icon_oval1.png") no-repeat;
          background-size: cover;
          margin-bottom: 0.14rem;
          .content_top {
            padding-top: 0.1rem;
            display: flex;
            margin-bottom: 0.19rem;
            .content_title {
              padding-left: 0.19rem;
              font-size: 0.14rem;
              color: #02c0cb;
              display: block;
              img {
                width: 0.15rem;
                vertical-align: middle;
              }
            }
            .content_icon {
              flex: 1;
              padding-right: 0.1rem;
              text-align: right;
              img {
                width: 0.2rem;
                height: 0.2rem;
              }
            }
          }
          .content_buttom {
            padding-left: 0.26rem;
            ul {
              display: flex;
              justify-content: space-between;
              li {
                padding: 0 0.3rem 0.1rem 0.1rem;
                span {
                  font-size: 0.16rem;
                }
                .cont {
                  font-size: 0.14rem;
                }
              }
            }
          }
        }
        .list_content2 {
          background: url("../../assets/icon_oval.png") no-repeat;
          background-size: cover;
          margin-bottom: 0.14rem;
          img {
            vertical-align: middle;
            width: 0.13rem;
            padding-right: 0.04rem;
            height: 0.16rem;
          }
          .content_image {
            position: absolute;
            left: 0.4rem;
            img {
              width: 0.13rem;
              height: 0.16rem;
            }
          }
          .content_top {
            padding-top: 0.1rem;
            display: flex;
            margin-bottom: 0.19rem;
            .content_title {
              padding-left: 0.19rem;
              font-size: 0.14rem;
              color: #02c0cb;
              display: block;
              img {
                width: 0.13rem;
                vertical-align: middle;
              }
            }
            .content_icon {
              flex: 1;
              padding-right: 0.1rem;
              text-align: right;
              img {
                width: 0.2rem;
                height: 0.2rem;
              }
            }
          }
          .content_buttom {
            padding-left: 0.26rem;
            ul {
              display: flex;
              justify-content: space-between;
              li {
                padding: 0 0.3rem 0.1rem 0.1rem;
                span {
                  font-size: 0.16rem;
                }
                .cont {
                  font-size: 0.14rem;
                }
              }
            }
          }
        }
      }
      .cont_information {
        padding-left: 0.14rem;
        margin-bottom: 0.47rem;
        .im_top {
          display: flex;
          font-size: 0.14rem;
          margin-bottom: 0.18rem;
          justify-content: space-between;
          .im_content {
            text-align: right;
            color: #02c0cb;
            img {
              width: 0.09rem;
            }
          }
        }
        .im_body {
          display: flex;
          border-radius: 0.14rem;
          background: linear-gradient(to left, #f1f1f1 0%, #dfdfdf 100%);
          height: 0.28rem;
          margin-bottom: 0.12rem;
          .im_tit {
            line-height: 0.28rem;
            padding-left: 0.16rem;
            span {
              margin-left: 0.27rem;
            }
          }
          .im_cont1 {
            flex: 1;
            text-align: right;
            line-height: 0.28rem;
            padding-right: 0.16rem;
            color: #02c0cb;
            img {
              width: 0.09rem;
            }
          }
          .im_cont {
            flex: 1;
            text-align: right;
            line-height: 0.28rem;
            padding-right: 0.16rem;
            color: #666;
            img {
              width: 0.09rem;
            }
          }
        }
      }
    }
  }
}

.bj {
  background: url("../../assets/icon_03.png") no-repeat left top;
  background-size: 100% 2.2rem;
}
</style>
